<template>
    <div v-if="filminfo">
      <v-touch @swiperight="onSwipeRight">
      <detail-header v-top :title="filminfo.name"></detail-header>
        <div :style="{backgroundImage:'url('+filminfo.poster+')'}"
        style="height:200px;background-size:cover;background-position:center"></div>

        <h3>{{filminfo.name}}-{{filminfo.filmType.name}}</h3>

        <div>
          {{filminfo.category}}
        </div>
        <div>
          {{filminfo.premiereAt | dataFilter}}
        </div>
        <div>
          {{filminfo.nation}}|{{filminfo.runtime}}分钟
        </div>
        <div :class="isShow?'':'synopsis'">{{filminfo.synopsis}}</div>
        <div style="text-align:center;">
          <i class="iconfont" :class="isShow?'icon-less':'icon-moreunfold'"
        @click="isShow=!isShow"></i>
        </div>
        <h3>演职人员</h3>
        <detail-swiper :perslide="4" style="margin: 10px;" swiperclass="swiper-actors">
          <div class="swiper-slide" v-for="(data,index) in filminfo.actors" :key="index">
            <img :src="data.avatarAddress">
            <div style="text-align:center">
              <div>{{data.name}}</div>
              <div>{{data.role}}</div>
            </div>
          </div>
        </detail-swiper>
        <h3>剧照</h3>
        <detail-swiper :perslide="2" swiperclass="swiper-photos">
          <div class="swiper-slide" v-for="(data,index) in filminfo.photos" :key="index">
            <div :style="{backgroundImage:'url('+data+')'}"
            style="height:100px;background-size:cover;background-position:center" @click="handlePreview(index)">
            </div>
          </div>
        </detail-swiper>
        </v-touch>
    </div>
</template>
<script>
import Vue from 'vue'
import http from '@/util/http' // 别名 @ ==> src的绝对路径
import moment from 'moment'
import detailSwiper from './detail/DetailSwiper'
import detailHeader from './detail/DetailHeader'
import { ImagePreview /* Toast */ } from 'vant'
import { mapMutations /* mapState */ } from 'vuex'
import VueTouch from 'vue-touch'
Vue.use(VueTouch, { name: 'v-touch' })

Vue.filter('dataFilter', (data) => {
  // 日期处理函数 - moment
  return moment(data * 1000).format('YYYY-MM-DD')
})

// 定义指令
Vue.directive('top', {
  inserted (el) {
    // console.log(el)
    el.style.display = 'none'
    window.onscroll = () => {
      if ((document.body.scrollTop || document.documentElement.scrollTop) > 50) {
        el.style.display = 'block'
      } else {
        el.style.display = 'none'
      }
    }
  },
  unbind () {
    window.onscroll = null
  }
})
export default {
  data () {
    return {
      filminfo: null,
      isShow: false
    }
  },
  components: {
    detailSwiper,
    detailHeader
  },
  methods: {
    ...mapMutations('TabbarModule', ['handleTabbarShowFalse', 'handleTabbarShowTrue']),
    handlePreview (index) {
      ImagePreview({
        images: this.filminfo.photos,
        startPosition: index,
        closeable: true,
        loop: false,
        closeIconPosition: 'top-left'
      })
    },
    onSwipeRight () {
      // console.log('right')
      this.$router.back()
    }
  },
  mounted () {
    // this.$route 当前匹配的路由对象信息
    // console.log('利用获取的id，ajax请求后端接口', this.$route.params.myid)
    // console.log('利用获取的id，ajax请求后端接口', this.$route.query.myid)
    // 显示一个loading
    /* Toast.loading({
      message: '加载中...',
      forbidClick: true,
      overlay: true,
      loadingType: 'spinner',
      duration: 500
    }) */

    // 隐藏
    // this.$store.commit('handleTabbarShowFalse')
    this.handleTabbarShowFalse()

    http({
      url: `/gateway?filmId=${this.$route.params.myid}&k=6362654`,
      headers: {
        'X-Host': 'mall.film-ticket.film.info'
      }
    }).then(res => {
      /* console.log(res.data.data.film) */
      this.filminfo = res.data.data.film

      /* Toast.clear() */
    })

    /* window.onscroll = () => {
      console.log(document.documentElement.scrollTop)

      if (document.documentElement.scrollTop > 50) {
        console.log('显示')
      } else {
        console.log('隐藏')
      }
    } */
    /* axios({
      url: `https://m.maizuo.com/gateway?filmId=${this.$route.params.myid}&k=6362654`,
      headers: {
        'X-Client-Info': '{"a":"3000","ch":"1002","v":"5.0.4","e":"16150113011063240628961281"}',
        'X-Host': 'mall.film-ticket.film.info'
      }
    }).then(res => {
      console.log(res.data)
    }) */
  },
  beforeDestroy () {
    // 显示
    // this.$store.commit('handleTabbarShowTrue')
    this.handleTabbarShowTrue()
  }
}
</script>
<style lang="scss" scoped>
  .synopsis{
    height: 45px;
    overflow: hidden;
  }
</style>
